<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                 <h1 class="title ui-widget-header ui-corner-all ">Quản Lý Sản Phẩm</h1>
                <p:messages id="messages" autoUpdate="true" closable="true" showDetail="true"/>
                <!-- Insert Form -->
                <h:form id="insertForm">
                    <p:panel header="Tìm kiếm" style="margin-bottom: 20px; width: 300px">
                        <h:panelGrid styleClass="my-panel-grid" columns="2">
                            <h:outputText value="Tên:"/>
                            <p:inputText value="#{phoneController.selectedPhone.name}"/>

                            <p:outputLabel value="Loại:"/>
                            <p:selectOneMenu value="#{phoneController.selectedPhone.category.id}">
                                <f:selectItem itemValue="0" itemLabel="Chọn loại"/>
                                <f:selectItems value="#{phoneController.categoryList}" var="categoryList"
                                               itemValue="#{categoryList.id}" itemLabel="#{categoryList.name}"/>
                            </p:selectOneMenu>
                            
                            <p:outputLabel value="Nhà sản xuất:"/>
                            <p:selectOneMenu value="#{phoneController.selectedPhone.manufacturer.id}">
                                <f:selectItem itemValue="0" itemLabel="Chọn nhà sản xuất"/>
                                <f:selectItems value="#{phoneController.manufacturerList}" var="manufacturerList"
                                               itemValue="#{manufacturerList.id}" itemLabel="#{manufacturerList.name}"/>
                            </p:selectOneMenu>

                            <p:commandButton id="searchButton" update=":insertForm:phoneDataTable" actionListener="#{phoneController.search()}" icon="ui-icon" value="Tìm"/>
                        </h:panelGrid>
                    </p:panel>
                    
                    <!-- Data Table -->
                    <p:dataTable style="text-align: center" id="phoneDataTable" var="phone" value="#{phoneController.phoneList}" paginator="true" rows="10" 
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" paginatorPosition="bottom"
                                 emptyMessage="Không có sản phẩm">
                        
                        <p:column headerText="ID">
                            <p:outputLabel value="#{phone.id}"/>
<!--                            <p:inputText binding="#{phone.id}"/>-->
                        </p:column>
                        
                        <p:column headerText="Tên">
                            <p:outputLabel value="#{phone.name}"/>
                        </p:column>
                        
                        <p:column headerText="Loại">
                            <p:outputLabel value="#{phone.category.name}"/>
                        </p:column>
                        
                        <p:column headerText="Nhà sản xuất">
                            <p:outputLabel value="#{phone.manufacturer.name}"/>
                        </p:column>
                        
                        <p:column headerText="Giá">
                            <p:outputLabel value="#{phone.price}">
                                <f:convertNumber type="number"/>
                            </p:outputLabel>
                        </p:column>
                        
                        <p:column headerText="Số lượng">
                            <p:outputLabel value="#{phone.quantity}"/>
                        </p:column>
                        
                        <p:column headerText="Hệ điều hành">
                            <p:outputLabel value="#{phone.os.name}"/>
                        </p:column>
                        
                        <p:column headerText="Bảo hành">
                            <p:outputLabel value="#{phone.warranty}"/>
                        </p:column>
                        
                        <!-- Actions -->
                        <p:column>
                            <p:commandButton id="btnUpdate" update=":updateForm" oncomplete="PF('updateDialog').show()" icon="ui-icon ui-icon-wrench" title="Sửa">
                                <f:setPropertyActionListener value="#{phone}" target="#{phoneController.selectedPhone}"/>
                            </p:commandButton>
                            <p:commandButton id="btnDelete" update=":deleteProductForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                <f:setPropertyActionListener value="#{phone}" target="#{phoneController.selectedPhone}"/>
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>
                </h:form>
                
                <h:form id="updateForm">
                    <p:dialog header="Sửa" widgetVar="updateDialog" resizable="false" showEffect="fade" hideEffect="fade" modal="true">  
                        <p:tabView id="tabView">
                            <!-- Tab 1 -->
                            <p:tab id="tab1" title="Thông tin">
                                <h:panelGrid columns="2" cellpadding="10" width="800px">
                                    <h:outputLabel for="name" value="Tên:"/>
                                    <p:inputText id="name" value="#{phoneController.selectedPhone.name}" style="width: 200px; margin: 5px"/>

                                    <h:outputLabel for="category" value="Loại:"/>
                                    <p:selectOneMenu id="category" value="#{phoneController.selectedPhone.category.id}" style="margin: 5px">
                                        <f:selectItems value="#{phoneController.categoryList}" var="categoryList"
                                                       itemValue="#{categoryList.id}" itemLabel="#{categoryList.name}"/>
                                    </p:selectOneMenu>
                                    
                                    <h:outputLabel for="manufacturer" value="Nhà sản xuất:"/>
                                    <p:selectOneMenu id="manufacturer" value="#{phoneController.selectedPhone.manufacturer.id}" style="margin: 5px">
                                        <f:selectItems value="#{phoneController.manufacturerList}" var="manufacturerList"
                                                       itemValue="#{manufacturerList.id}" itemLabel="#{manufacturerList.name}"/>
                                    </p:selectOneMenu>
                                    
                                    <h:outputLabel for="os" value="Hệ điều hành:"/>
                                    <p:selectOneMenu id="os" value="#{phoneController.selectedPhone.os.id}" style="margin: 5px">
                                        <f:selectItems value="#{phoneController.osList}" var="osList"
                                                       itemValue="#{osList.id}" itemLabel="#{osList.name}"/>
                                    </p:selectOneMenu>
                                    
                                    <h:outputLabel for="price" value="Giá:"/>
                                    <p:spinner id="price" value="#{phoneController.selectedPhone.price}" required="true" stepFactor="50000" min="50000" style="margin: 5px"/>

                                    <h:outputLabel value="Số lượng:"/>
                                    <p:inputText value="#{phoneController.selectedPhone.quantity}" style="margin: 5px" disabled="true"/>
                                    
                                    <h:outputLabel for="warranty" value="Bảo hành:"/>
                                    <p:inputText id="warranty" value="#{phoneController.selectedPhone.warranty}" style="margin: 5px"/>

                                    <!-- Actions -->
                                    <f:facet name="footer">
                                        <p:commandButton actionListener="#{phoneController.update()}" update=":insertForm:phoneDataTable, :messages" icon="ui-icon" title="Cập nhật" value="Cập nhật"/>
                                        <p:commandButton oncomplete="updateDialog.hide();" icon="icon-create" title="Hủy bỏ" value="Hủy bỏ"/>
                                    </f:facet>
                                </h:panelGrid>
                            </p:tab>
                            <!-- Tab 2 -->
                            <p:tab id="tab2" title="Ưu, nhược điểm">
                                <h:panelGrid columns="2" cellpadding="10" width="800px">
                                    <h:outputLabel for="generalInfo" value="Ưu điểm:"/>
                                    <p:editor id="generalInfo" value="#{phoneController.selectedPhone.advantage}" width="700" height="300"/>
                                    <h:outputLabel for="general" value="Nhược điểm:"/>
                                    <p:editor id="general" value="#{phoneController.selectedPhone.disadvantage}" width="700" height="200"/>
                                    <!-- Actions -->
                                    <f:facet name="footer">                                        
                                        <p:commandButton actionListener="#{phoneController.update()}" update=":messages" icon="ui-icon" title="Create" value="Cập nhật"/>
                                        <p:commandButton oncomplete="updateDialog.hide();" icon="icon-create" title="Cancel" value="Hủy bỏ"/>
                                    </f:facet>
                                </h:panelGrid>
                            </p:tab>
                            <!-- Tab 3 -->
                            <p:tab id="tab3" title="Phụ kiện, mô tả">
                                <h:panelGrid columns="2" cellpadding="10" width="800px">
                                    <h:outputLabel for="a" value="Phụ kiện đi kèm:"/>
                                    <p:editor id="a" value="#{phoneController.selectedPhone.standardkit}" width="700" height="200"/>
                                    <h:outputLabel for="b" value="Mô tả:"/>
                                    <p:editor id="b" value="#{phoneController.selectedPhone.description}" width="700" height="300"/>
                                    <!-- Actions -->
                                    <f:facet name="footer">                                        
                                        <p:commandButton actionListener="#{phoneController.update()}" update=":messages" icon="ui-icon" title="Create" value="Cập nhật"/>
                                        <p:commandButton oncomplete="updateDialog.hide();" icon="icon-create" title="Cancel" value="Hủy bỏ"/>
                                    </f:facet>
                                </h:panelGrid>
                            </p:tab>
                        </p:tabView>
                    </p:dialog>  
                </h:form>
                
                <!-- Delete product form -->
                <h:form id="deleteProductForm">
                    <p:confirmDialog closable="false" showEffect="fade" hideEffect="fade" severity="alert" widgetVar="confirmation"
                                     message="Xóa sản phẩm?" header="Xóa sản phẩm" style="margin:5px auto;">
                        <h:panelGroup layout="block" style="text-align: right">
                            <p:commandButton value="Đồng ý" action="#{phoneController.delete()}" oncomplete="confirmation.hide();" update=":insertForm:phoneDataTable, :messages" />
                            <p:commandButton value="Hủy bỏ" oncomplete="confirmation.hide();" />
                        </h:panelGroup>
                    </p:confirmDialog>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>